<template>
	<view>
		<view class="logo">
			<image class="logo-img" src="../../static/logo.png" mode=""></image>
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="title">
				姓名
			</view>
			<view class="row">
				<input class="uni-input" name="name" placeholder="请输入姓名" />
			</view>
			<view class="title">
				学校
			</view>
			<view class="row">
				<input class="uni-input" name="school" placeholder="请输入学校" />
			</view>
			<view class="title">
				年级
			</view>
			<view class="row">
				<input class="uni-input" name="grade" placeholder="请输入年级" />
			</view>
			<view class="title">
				联系电话
			</view>
			<view class="row">
				<input class="uni-input" name="phone" placeholder="请输入联系电话" />
			</view>
			<view class="title">
				科目
			</view>
			<view class="row">
				<picker class="uni-picker" @change="bindPickerChange($event,'oakBusiness')" name="oakBusiness" :value="oakBusiness" :range="oakBusinesses">
					<view class="uni-input">{{oakBusinesses[oakBusiness]}}</view>
				</picker>
			</view>
			<view class="title">
				上课周期
			</view>
			<view class="row">
				<input class="uni-input" name="rangetimes" placeholder="请输入上课周期" />
			</view>
			<view class="title">
				金额
			</view>
			<view class="row">
				<input class="uni-input" name="price" placeholder="请输入金额" />
			</view>
			<view class="title">
				活动类型
			</view>
			<view class="row">
				<picker class="uni-picker" @change="bindPickerChange($event,'activitytype')" name="activitytype" :value="activitytype" :range="activitytypes">
					<view class="uni-input">{{activitytypes[activitytype]}}</view>
				</picker>
			</view>
			<view class="title">
				优惠金额
			</view>
			<view class="row">
				<input class="uni-input" name="activitymoney" placeholder="请输入优惠金额" />
			</view>
			<view class="title">
				收费金额
			</view>
			<view class="row">
				<input class="uni-input" name="pricemethod" placeholder="请输入收费金额" />
			</view>
			<view class="title">
				缴费方式
			</view>
			<view class="row">
				<radio value="微信支付" :checked="true" />微信支付
			</view>
			<view class="btn-row">
				<button type="primary" formType="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
export default {
    data() {
        return {
			oakBusiness: 0,
			oakBusinesses: ['科目1', '科目2', '科目3', '科目4'],
			activitytype: 0,
			activitytypes: ['活动1', '活动2', '活动3', '活动4'],
        }
    },
    methods: {
		bindPickerChange: function(e,key) {
			console.log(key)
			console.log('picker发送选择改变，携带值为', e.target.value)
			this[key] = e.target.value
		},
        formSubmit: function(e) {
            console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
        },
    }
}

</script>

<style>
.logo {
	width: 200upx;
	height: 200upx;
	margin: 40upx auto;
}
.logo-img {
	width: 100%;
	height: 100%;
}
.title {
	padding-left: 40upx;
	margin-top: 20upx;
}
.row {
	height: 80upx;
	border-bottom: 1upx solid #C0C0C0;
	line-height: 80upx;
	padding-left: 40upx;
}
.uni-input {
	height: 100%;
}
.btn-row {
	width: 80%;
	margin:40upx auto;
}
</style>
